<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer UI Elements
 */
/**
 * polymer-ui-collapsible has a header and a body and the body appears or
 * disappears based on "active" property.  Tapping on the header will toggle
 * the active state.  User needs to put the class "polymer-ui-collapsible-header"
 * on the element to indicate it represents a header.
 *
 * Example:
 *
 *     <polymer-ui-collapsible>
 *       <div class="polymer-ui-collapsible-header">Title</div>
 *       <div>
 *         some content...
 *       </div>
 *     </polymer-ui-collapsible>
 *
 * @class polymer-ui-collapsible
 */
-->
<link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">

<polymer-element name="polymer-ui-collapsible" attributes="active">
  <template>
    <link rel="stylesheet" href="polymer-ui-collapsible.css">
    <div on-tap="toggle">
      <content select=".polymer-ui-collapsible-header"></content>
    </div>
    <div id="collapsibleBody">
      <content></content>
    </div>
    <polymer-collapse targetId="collapsibleBody" closed="{{!active}}"></polymer-collapse>
  </template>
  <script>
    Polymer('polymer-ui-collapsible', {
      toggle: function() {
        this.active = !this.active;
      }
    });
  </script>
</polymer-element>
